<template lang="html">
  <div id="charts">
    <input type="date" v-model="startdate" />至
    <input type="date" v-model="enddate" />
    <div id="CG" :style="{width:'100%',height:'100%'}">
    </div>
  </div>
</template>

<script>
  import * as Util from '../Util'
  import co from 'co'
  import echarts from 'echarts'
  import { HttpResetClass } from 'vue-client'

  let getData = function * (self) {
    let load = new HttpResetClass()
    load.load('POST','rs/sql/chargeGas',
      {data: {startDate: self.startdate, endDate: self.enddate}},
      {resolveMsg: null, rejectMsg: null})
      .then((res) => {
        self.texttile = '售气收费'
       let arrparams = []
        for (var i = 0; i < res.data.length; i++) {
          arrparams[i] = res.data[i].name
        }
        console.log(arrparams,res.data)
        self.set(arrparams,res.data)
      })
  }
  export default {
    title: "售气收费",
    props: {
      startdate: {
        type: String,
        default: Util.toStandardDateString()
      },
      enddate: {
        type: String,
        default: Util.toStandardDateString()
      }
    },
    data () {
      return {
        texttile: '',
        xc: ''
      }
    },
    methods: {
      set (arrparams,pricedata) {
        this.xc = echarts.init(document.getElementById('CG'))
        this.xc.setOption(
          {
            title: {
              text: this.texttile + '嵌套环形图',
              subtext: '数据汇总',
              x: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
              orient: 'vertical',
              x: 'left',
              data:['商业用气','民用用气','公福用气','工业用气','采暖用气','福利事业']
            },
            series: [
              {
                name:'售气金额',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                  normal: {
                    position: 'inner'
                  }
                },
                labelLine: {
                  normal: {
                    show: false
                  }
                },
                data:[
                  {value:335, name:'商业', selected:true},
                  {value:679, name:'民用'},
                  {value:1548, name:'工业'}
                ]
              },
              {
                name:'售气金额',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                  normal: {
                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                    backgroundColor: '#eee',
                    borderColor: '#aaa',
                    borderWidth: 1,
                    borderRadius: 4,
                    // shadowBlur:3,
                    // shadowOffsetX: 2,
                    // shadowOffsetY: 2,
                    // shadowColor: '#999',
                    // padding: [0, 7],
                    rich: {
                      a: {
                        color: '#999',
                        lineHeight: 22,
                        align: 'center'
                      },
                      // abg: {
                      //     backgroundColor: '#333',
                      //     width: '100%',
                      //     align: 'right',
                      //     height: 22,
                      //     borderRadius: [4, 4, 0, 0]
                      // },
                      hr: {
                        borderColor: '#aaa',
                        width: '100%',
                        borderWidth: 0.5,
                        height: 0
                      },
                      b: {
                        fontSize: 16,
                        lineHeight: 33
                      },
                      per: {
                        color: '#eee',
                        backgroundColor: '#334455',
                        padding: [2, 4],
                        borderRadius: 2
                      }
                    }
                  }
                },
                data:[
                  {value:335, name:'商业用气'},
                  {value:310, name:'民用用气'},
                  {value:234, name:'公福用气'},
                  {value:135, name:'工业用气'},
                  {value:1048, name:'采暖用气'},
                  {value:251, name:'福利事业'}
                ]
              }
            ]
          })
      },
      searchdata () {
        let getGen =getData(this)
        co(getGen)
      }
    },
    ready () {
      this.searchdata()
    },
    watch: {
      'startdate' (val) {
        this.searchdata()
      },
      'enddate' (val) {
        this.searchdata()
      }
    }

  }
</script>
